<template>
  <div>
    <div class="container">
      <h3 class="title">城市热招</h3>
      <swiper class="swipe_container" ref="mySwiper" :options="swiperOptions">
        <swiper-slide>
          <img src="@/assets/img/01.jpg" alt="img">
        </swiper-slide>
        <swiper-slide>
          <img src="@/assets/img/02.jpg" alt="img">
        </swiper-slide>
        <swiper-slide>
          <img src="@/assets/img/03.jpg" alt="img">
        </swiper-slide>
        <swiper-slide>
          <img src="@/assets/img/04.jpg" alt="img">
        </swiper-slide>
        <swiper-slide>
          <img src="@/assets/img/05.jpg" alt="img">
        </swiper-slide>
        <swiper-slide>
          <img src="@/assets/img/06.jpg" alt="img">
        </swiper-slide>
        <!--        <div class="swiper-pagination" slot="pagination"></div>-->
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeSwipe',
  data () {
    return {
      swiperOptions: {
        // pagination: {
        //   el: '.swiper-pagination',
        //   clickable: true
        // },
        slidesPerView: 6,
        spaceBetween: 5,
        loop: true,
        autoplay: true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  height: 50px;
  line-height: 50px;
  padding-left: 8px;
  font-weight: 500;
  background-color: #ffffff;
  position: relative;
  cursor: pointer;
  color: #00c2b3;
  margin-top: 35px;

  &:before {
    content: '';
    display: inline-block;
    position: absolute;
    width: 60px;
    height: 3px;
    background-color: #00c2b3;
    left: 8px;
    bottom: 0;
  }
}

.swipe_container {
  width: 100%;
  height: auto;
  padding: 10px 0;

  .swiper-slide {
    width: 33%;
    overflow: hidden;

    img {
      width: 100%;
      opacity: 0.9;
      transition: .3s linear;

      &:hover {
        opacity: 2;
        transform: scale(1.1);
      }
    }
  }
}
</style>
